<template>
	<view class="details">
		<view class="status">
			<text class="title" v-if="orderDetail.status">{{orderType[orderDetail.status].title}}</text>
			<view class="dropdown" v-if="orderDetail.status == '1'">
				订单
				<uni-countdown color="#FFFFFF" backgroundColor="transparent" splitorColor="#ffffff" :showDay="false"
					:hour="hour" :minute="minute" :second="second"></uni-countdown>
				会自动取消，请尽快支付订单
			</view>
			<view class="dropdown" v-else>
				<text v-if="orderDetail.status">
					{{orderType[orderDetail.status].desc}}
				</text>
			</view>
			<image class="right_img" :src="IMGLink+'/my/right_bg.png'" mode="widthFix"></image>
		</view>
		<view class="posit_top">
			<view class="address" v-if="orderDetail.status != '5'">
				<view class="names">
					<text>收货地址</text>
					<image v-if="orderDetail.status == '1'" class="edit_icon" :src="IMGLink+'/my/edit_icon.png'" @click="goAddress"></image>
				</view>
				<view v-if="orderDetail.contacts && orderDetail.status != '1'">
					<view class="address_info">
						<text>{{orderDetail.contacts}}</text>
						<text>{{orderDetail.phone}}</text>
					</view>
					<view class="address_info">
						{{orderDetail.address}}
					</view>
				</view>
				<view v-if="addressinfo && orderDetail.status == '1'">
					<view class="address_info">
						<text>{{addressinfo.name}}</text>
						<text>{{addressinfo.tel}}</text>
					</view>
					<view class="address_info">
						{{addressinfo.addr}}
					</view>
				</view>
			</view>
			<view class="shop_message">
				<view class="shops">
					<image class="shop_img" :src="orderDetail.image"></image>
					<view class="shops_right">
						<view class="shop_info">
							<view class="shop_info_left">
								<text class="name">{{orderDetail.name}}</text>
							</view>
							<view class="shop_info_right">
								￥{{orderDetail.total_price}}
							</view>
						</view>
						<view class="goodspec">
							<text class="tag" v-for="(tag,idx) in orderDetail.goods_specs_content"
								:key="idx">{{tag}}</text>
						</view>
					</view>
				</view>
				<view class="success_info" v-if="orderDetail.status != '5'">
					<text>拼购成功后48小时内发货</text>
				</view>
				<view class="shop_deposit">
					<text>保证金</text>
					<text class="final">￥{{orderDetail.bond_price}}</text>
				</view>
				<view class="shop_deposit">
					<text>尾款</text>
					<text class="final">￥{{orderDetail.tail_price}}</text>
				</view>
				<view class="shop_deposit">
					<text>邮费</text>
					<text class="final">￥0.00</text>
				</view>
				<view class="shop_deposit">
					<text>优惠券</text>
					<text class="final"
						v-if="orderDetail.status != '1'">-￥{{orderDetail.coupon_price | toFixedZero}}</text>
					<view v-else class="sale_txt">
						<text @click="openCoup">{{couponName}}</text>
						<uni-icons class="arrowright" type="arrowright" size="14" color="#838383"></uni-icons>
					</view>

				</view>
				<view class="shop_deposit" v-if="orderDetail.status != '1' && orderDetail.status != '5'">
					<text>实付款</text>
					<text class="realpay">￥{{orderDetail.real_price}}</text>
				</view>
			</view>
			<view class="order_info">
				<view class="names">
					订单信息
				</view>
				<view class="order_time" @click="doCopy">
					<text>订单编号：{{orderDetail.serial_num}}</text>
					<text class="copy">复制</text>
				</view>
				<view class="order_time">
					下单时间：
					{{orderDetail.create_date}}
				</view>
				<view class="order_time" v-if="orderDetail.status != '1' && orderDetail.status != '5'">
					付款时间：
					{{orderDetail.payment_time}}
				</view>
				<view class="order_time" v-if="orderDetail.status == '3' || orderDetail.status == '4'">
					发货时间：
					{{orderDetail.deliver_time}}
				</view>
				<view class="order_time" v-if="orderDetail.status == '4'">
					成交时间：
					{{orderDetail.finish_time}}
				</view>
				<view class="order_time" v-if="orderDetail.status == '5'">
					关闭时间：
					{{orderDetail.cancel_time}}
				</view>
			</view>
		</view>

		<view class="operates" v-if="orderDetail.status == '1'">
			<view class="pay_money">
				支付金额:
				<text>￥{{orderDetail.pay_price}}</text>
			</view>
			<button class="pay_btn" type="default" size="mini" @click="goPay">去支付</button>
		</view>
		<view class="operates deals" v-else>
			<button v-if="orderDetail.status == '2' && !version.embedded" class="contact_btn" type="default" size="mini"
				open-type="contact">联系客服</button>
			<button v-if="orderDetail.status == '3' || orderDetail.status == '4'" class="flow_btn" type="default"
				size="mini" @click="goFlow">查看物流</button>

			<button v-if="orderDetail.status == '3'" class="contact_btn" type="default" size="mini"
				@click="isConfirmGoods">确认收货</button>
			<!-- <button class="flow_btn" type="default" size="mini" v-if="orderDetail.status == '4'"
				@click="reBuys()">再次购买</button> -->
		</view>

		<uni-popup ref="discount" type="top" class="discount_pop" :mask-click="true">
			<discountPop @changecouponId='changecouponId' @closeDiscountPop='closeDiscountPop'
				:discountList="discountList" :payprice="orderDetail.tail_price"></discountPop>
		</uni-popup>
	</view>
</template>

<script>
	import { version } from "@/common/config.js"
	import {
		orderlist
	} from '@/api/my/orders.js';
	import {
		addresslist
	} from "@/api/my/address.js";
	import {
		mapState,
	} from 'vuex';
	import discountPop from "../../components/signsuc/signsuc";
	import copyFunc from "@/utils/userCommon.js";
	export default {
		components: {
			discountPop,
		},
		data() {
			return {
				version: version,
				IMGLink: this.IMGLink,
				orderType: {
					1: {
						title: "待付款",
						desc: "",
					},
					2: {
						title: "待发货",
						desc: "您的物品即将送出了！"
					},
					3: {
						title: "待收货",
						desc: "您的物品即将送达了！"
					},
					4: {
						title: "交易完成",
						desc: "期待您的再次光临！"
					},
					5: {
						title: "订单关闭",
						desc: "订单已关闭"
					}
				},
				orderDetail: {},

				hour: 0,
				second: 0,
				minute: 0,
				serial_num: "", //订单num
				orderid: "", //订单id
				operate: "", //操作
				discountList: [], //优惠券列表
				couponId: [],
				couponName: "选择优惠券",
				addressFlag: false,
			}
		},
		created() {},
		computed: {
			...mapState(['addressinfo'])
		},
		onLoad(options) {
			this.serial_num = options.serial_num;
			this.orderid = options.id;
			this.getDetail();
			// 初始化init addressinfo
			this.$store.commit("setAddressinfo", null);
			this.getTicketList();
			this.getDefaultAddress();
		},
		onShow() {
			if (this.addressFlag && this.addressinfo && this.addressinfo.id) {
				this.getAddressInfoById();
			}
		},
		methods: {
			changecouponId(data) {
				this.couponId = data.map(item => {
					return item.id
				});
				this.couponName = data.map(item => {
					return item.title
				}).join(',');

				if (!this.couponName) {
					this.couponName = "选择优惠券";
				}

				let total = this.orderDetail.tail_price;
				data.map(i => {
					total = ((Number(total) - Number(i.offset_value)) * 100 / 100).toFixed(2);
					this.orderDetail.pay_price = total;
				});

			},
			closeDiscountPop() {
				this.$refs.discount.close()
			},
			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				orderlist('orderinfo', {
					serial_num: this.serial_num
				}).then(res => {
					this.orderDetail = res.data;

					this.orderDetail.pay_price = res.data.tail_price; //支付金额==尾款

					let create_date = this.orderDetail.create_date.replace(/-/g, '/');
					let now_time = this.orderDetail.now_time.replace(/-/g, '/');
					let stamp = (1000 * 60 * 60 * 24) - (new Date(now_time).getTime() - new Date(create_date)
						.getTime());
					let hours = parseInt((stamp % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					let minutes = parseInt((stamp % (1000 * 60 * 60)) / (1000 * 60));
					let seconds = (stamp % (1000 * 60)) / 1000;

					this.hour = Number(hours < 10 ? ('0' + hours) : hours);
					this.minute = Number(minutes < 10 ? ('0' + minutes) : minutes);
					this.second = Number(seconds < 10 ? ('0' + seconds) : seconds);

					uni.hideLoading();
				}).catch(error => {
					uni.hideLoading();
				})
			},
			// 优惠券列表
			getTicketList() {
				addresslist('getUserCouponsList', {
					type: "1", //满减券
					status: "1", //未使用
					serial_num: this.serial_num
				}).then(res => {
					let datas = res.data.list;
					for (let n of datas) {
						n.active = false;
					}

					this.discountList = datas;
				}).catch(error => {})
			},
			// 获取默认地址
			getDefaultAddress() {
				addresslist("getUserDefaultAddressList", {})
					.then((res) => {
						let datas = res.data.list;
						if (Object.keys(datas).length > 0) {
							this.$store.commit("setAddressinfo", datas);
						}
						this.addressFlag = true;
					})
					.catch((error) => {});
			},
			// 根据地址id获取地址详情
			getAddressInfoById() {
				addresslist("getUserAddressDetail", {
						id: this.addressinfo.id
					})
					.then((res) => {
						let datas = res.data.userAddressInfo;
						this.$store.commit("setAddressinfo", datas);
					})
					.catch((error) => {});
			},

			doCopy() {
				copyFunc.is_copy(this.orderDetail.serial_num);
			},
			// 去支付
			goPay() {
				if (!this.addressinfo || !this.addressinfo.id) {
					uni.showToast({
						title: '请选择收货地址',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: `/pagesA/my/orders/orderPay?serial_num=${this.serial_num}&address_id=${this.addressinfo.id}&coupon_id=${JSON.stringify(this.couponId)}&payprice=${this.orderDetail.pay_price}`
				})
			},
			// 查看物流
			goFlow() {
				uni.navigateTo({
					url: `/pagesA/my/orders/shopflow?serial_num=${this.serial_num}`
				})
			},
			// 确定收货
			isConfirmGoods() {
				this.operate = 'takegoods';
				this.showToast('确认收货吗？');
			},
			takeGoods() {
				uni.showLoading({
					title: '确定收货中···'
				});
				orderlist('confirm', {
					id: this.orderid
				}).then(res => {
					if (res.code == 200) {
						this.getDetail();
					}
					uni.hideLoading();
				}).catch(error => {
					uni.hideLoading();
				})
			},
			// 弹框
			showToast(text) {
				uni.showModal({
					title: '提示',
					content: text,
					success: (res) => {
						if (res.confirm) {
							if (this.operate == 'takegoods') { //确认收货
								this.takeGoods();
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 修改地址
			goAddress() {
				uni.navigateTo({
					url: `/pagesA/my/address/addressList?type=choose?addressid=`
				})
			},

			openCoup() {
				this.$refs.discount.open('bottom')
			},
			// 联系客服
			goContact() {
				uni.navigateTo({
					url: '/pagesA/my/customerservice/customerservice'
				})
			},
			// 再次购买
			reBuys() {
				uni.navigateTo({
					url: `/pages/shopping/commodity/detail/index?group_type=${this.orderDetail.group_type}&group_id=${this.orderDetail.group_id}&id=${encodeURIComponent(this.orderDetail.goods_id)}`
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #EFF0F1;
	}
</style>
<style lang="scss" scoped>
	@import '../my.scss';

	.details {
		.status {
			box-sizing: border-box;
			position: relative;
			height: 328rpx;
			background-color: #F54642;
			color: #FFFFFF;
			padding: 40rpx 20rpx;

			.right_img {
				width: 360rpx;
				position: absolute;
				right: 0;
				top: 0;
			}

			.title {
				font-size: 36rpx;
				font-weight: 500;
			}
		}

		.dropdown {
			height: 56rpx;
			font-size: 28rpx;
			@include flexLayout(center, flex-start);

			/deep/ .uni-countdown__number {
				width: auto;
				font-size: 28rpx;
			}

			/deep/ .uni-countdown,
			/deep/ uni-countdown {
				margin-bottom: -2rpx;
			}
		}

		.posit_top {
			position: relative;
			top: -140rpx;
			padding-bottom: 60rpx;
		}

		.address {
			@include cards;
			background-color: #FFFFFF;
			padding: 30rpx 30rpx 40rpx;

			.edit_icon {
				width: 32rpx;
				height: 28rpx;
			}

			&_info {
				color: #5C5C5C;
				font-size: 26rpx;
				margin-top: 18rpx;

				text {
					margin-right: 10rpx;
				}
			}
		}

		.shop_message {
			@include cards;
			background-color: #FFFFFF;
			margin: 30rpx 3%;
			padding-bottom: 20rpx;
		}

		.shops {
			@include flexLayout(center, space-between);

			.shop_img {
				width: 138rpx;
				height: 154rpx;
				border-radius: 8rpx;
			}

			&_right {
				width: 75%;
				color: #0B0B0D;
				height: 154rpx;
				color: #0B0B0D;
				@include flexLayout(flex-start, space-between);
				flex-direction: column;

				.shop_info {
					width: 100%;
					@include flexLayout(flex-start, space-between);

					&_left {
						width: 70%;

						.name {
							@include exceedFlow(2);
						}
					}
				}

				.goodspec {
					.tag {
						display: inline-block;
						height: 42rpx;
						line-height: 42rpx;
						background-color: #F2F3F4;
						color: #ADADAD;
						font-size: 24rpx;
						padding: 0 16rpx;
						margin-top: 16rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.success_info {
			line-height: 36rpx;
			color: #F54642;
			font-size: 26rpx;
			margin: 10rpx 0 10rpx 156rpx;
		}

		.shop_deposit {
			line-height: 62rpx;
			@include flexLayout(center, space-between);
			color: #5C5C5C;
			font-size: 24rpx;

			.final {
				color: #0B0B0D;
			}

			.realpay {
				color: #F54642;
			}

			.sale_txt {
				width: 80%;
				text-align: right;
			}

		}

		.names {
			line-height: 52rpx;
			@include flexLayout(center, space-between);
			color: #070707;
			font-size: 30rpx;
			font-weight: 500;
		}

		.order_info {
			@include cards;
			background-color: #FFFFFF;
			padding: 20rpx 30rpx;

			.order_time {
				line-height: 56rpx;
				@include flexLayout(center, space-between);
				color: #595959;
				font-size: 28rpx;

				.copy {
					color: #F54642;
					font-size: 24rpx;
				}
			}
		}

		.operates {
			box-sizing: border-box;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			@include flexLayout(center, space-between);
			background-color: #FFFFFF;
			padding: 30rpx 40rpx 40rpx;
			color: #595959;
			font-size: 28rpx;

			text {
				color: #F54642;
			}

			button {
				width: 270rpx;
				height: 76rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				margin: 0 0 0 20rpx;
				padding: 0;
			}

			.pay_btn {
				background-color: #F54642;
				color: #FFFFFF;
			}
		}

		.deals {
			justify-content: flex-end;

			button {
				border: 1px solid #F54642;
				background-color: #FFFFFF;
			}

			.contact_btn {
				color: #F54642;
			}

			.flow_btn {
				width: 190rpx;
				border-color: #B3B3B3;
				color: #464646;
			}
		}
	}
</style>
